// 上传list

import add from '@/assets/add.png';
import address from '@/assets/address.png';
import assest from '@/assets/assest.png';
import bankImg from '@/assets/bank.png';
import idcardimg from '@/assets/idcard.png';
import report from '@/assets/report.png';
import done from '@/assets/upload_suc.png';
import work from '@/assets/work.png';
import { RightOutlined } from '@ant-design/icons';
import { Col, Row, Space } from 'antd';
import React, { useMemo, useState } from 'react';
import { getLocale, useIntl, useModel } from 'umi';
import BankModal from './BankModal';
import CommonModal from './CommonModal';
import IdCardModal from './IdCardModal';
import InsuranceModal from './InsuranceModal';
type Props = {
  filterList?: {
    defaultValue: string;
    profileName: string;
  }[];
  disabled?: boolean;
};
const UploadList: React.FC<Props> = ({ filterList, disabled = false }) => {
  const intl = useIntl();
  const { uploadParams, setUploadParams } = useModel('uploadModel');
  const initParmas = { visible: false, type: '', title: '', subTitle: '' };
  const [modalParams, setModalParams] = useState(initParmas);
  const isEn = getLocale() == 'en-US';

  const { visible, type, title, subTitle } = modalParams;
  const {
    estateProof,
    vehicleProof,
    stockProof,
    insuranceProof,
    cryptocurrencyProof,
    otherProof,
    statementsConfirmFlag,
  } = uploadParams;

  const currentVal = (uploadParams as any)[type] || [];
  const list = useMemo(
    () => {
      // 默认的list
      const defaultList = [
        {
          icon: idcardimg,
          key: 'idCard',
          label: 'home.idcard',
        },
        {
          icon: address,
          key: 'addressProof',
          label: 'home.address',
          subTitle: 'home.live_title_word',
        },
        {
          icon: bankImg,
          label: 'home.bank',
          key: 'bankMonthlyStatement',
        },
        {
          icon: work,
          label: 'home.work',
          key: 'workProof',
        },
        {
          icon: report,
          label: 'home.report',
          key: 'creditProof',
        },
        {
          icon: assest,
          label: 'home.assets',
          key: 'assest',
          list: [
            {
              label: 'home.house_info',
              key: 'estateProof',
              value: estateProof,
            },
            {
              label: 'home.car',
              key: 'vehicleProof',
              value: vehicleProof,
            },
            {
              label: 'home.stock',
              value: stockProof,
              key: 'stockProof',
            },
            {
              label: 'home.insurance',
              value: insuranceProof,
              key: 'insuranceProof',
            },
            {
              label: 'home.encipher',
              value: cryptocurrencyProof,
              key: 'cryptocurrencyProof',
            },
            {
              label: 'home.other',
              value: otherProof,
              key: 'otherProof',
            },
          ],
        },
      ];
      if (filterList && filterList?.length > 0) {
        // 额外的列表
        const extraList: {
          defaultValue: string;
          profileName: string;
        }[] = [];
        const defalutKey = defaultList
          .map((item) => {
            if (item.list) {
              return item.list.map((item) => item.key);
            }
            return item.key;
          })
          .flat();

        // 获取过滤的key
        const key = filterList.map((item) => {
          if (!defalutKey.includes(item.defaultValue)) {
            // 获取额外的数组
            extraList.push(item);
          }
          return item.defaultValue;
        });
        const newList = defaultList.filter((item) => {
          if (item.list && item?.list?.length > 0) {
            item.list = item.list?.filter((item) => key.includes(item.key));
            return item.list.length > 0;
          }
          return key.includes(item.key);
        });
        // 获取新的列表
        return [
          ...newList,
          ...extraList.map((item) => {
            const { defaultValue, profileName } = item;

            return {
              icon: '',
              label: profileName,
              key: defaultValue,
            };
          }),
        ];
      }
      return defaultList;
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [uploadParams, filterList],
  );
  //  统一处理弹窗
  const handleModalVisile = (type: string, title = '', subTitle = '') => {
    setModalParams({
      visible: true,
      type,
      title,
      subTitle,
    });
  };
  const handleCancel = () => {
    setModalParams(initParmas);
  };
  const handleChange = (value: Record<string, any>) => {
    setUploadParams({
      ...uploadParams,
      ...value,
    });
  };
  const handleVal = (val: any, key: string) => {
    const type = Object.prototype.toString.call(val);

    if (type == '[object Array]') {
      return key == 'insuranceProof'
        ? val?.filter((item: any) => Object.keys(item).length > 0).length > 0
        : val?.filter((item: any) => item.url).length > 0;
    } else if (type == '[object Object]') {
      return Object.values(val).every((item) => item);
    }
    return val;
  };
  return (
    <>
      <Row gutter={[0, 24]}>
        {list.map((item) => {
          const { icon, label, list, subTitle = '', key = '' } = item as any;

          const num = list?.filter((item: any) => !handleVal(item.value, item.key));
          const notAssests = key !== 'assest';

          const val =
            key === 'bankMonthlyStatement'
              ? statementsConfirmFlag || handleVal((uploadParams as any)[key], key)
              : handleVal((uploadParams as any)[key], key);
          // 判断是写死的还是后端返回的
          const fromSelf = label.includes('home.');
          return (
            <React.Fragment key={key}>
              <Col
                onClick={() => {
                  if (notAssests) {
                    handleModalVisile(
                      key,
                      fromSelf ? intl.formatMessage({ id: label }) : label,
                      subTitle ? intl.formatMessage({ id: subTitle }) : '',
                    );
                  }
                }}
                style={{ cursor: notAssests ? 'pointer' : '' }}
                span={24}
                className="upload"
                key={key}
              >
                <Space>
                  <img src={icon} width={28} />
                  {fromSelf ? intl.formatMessage({ id: label }) : label}
                </Space>

                <Space>
                  {!disabled ? (
                    notAssests ? (
                      <Space style={{ color: val ? '#0270DF' : '#999', fontSize: 16 }}>
                        {intl.formatMessage({
                          id: val ? 'home.uploaded' : 'home.upload',
                        })}
                        <img src={val ? done : add} width={28} />
                        {/* {val ? <img src={eyes} width={40} /> : null} */}
                      </Space>
                    ) : (
                      <div style={{ color: '#999' }}>
                        {intl.formatMessage(
                          {
                            id: isEn
                              ? num?.length > 1
                                ? 'home.upload_num1'
                                : 'home.upload_num'
                              : 'home.upload_num',
                          },
                          {
                            num: (
                              <span style={{ color: '#0270df', margin: '0 4px' }}>
                                {num?.length}
                              </span>
                            ),
                          },
                        )}
                      </div>
                    )
                  ) : (
                    notAssests && <RightOutlined />
                  )}
                </Space>
              </Col>
              {key == 'assest' && (
                <Row gutter={[24, 32]} style={{ width: '105%' }}>
                  {list?.map((item: any) => {
                    const { label: word, key, value } = item;
                    return (
                      <Col
                        span={8}
                        key={word}
                        onClick={() => {
                          handleModalVisile(key, intl.formatMessage({ id: word }));
                        }}
                      >
                        <div className="upload_assest_item">
                          <div> {intl.formatMessage({ id: word })}</div>
                          <div>
                            {disabled ? (
                              <RightOutlined />
                            ) : (
                              <img src={handleVal(value, key) ? done : add} width={28} />
                            )}
                          </div>
                        </div>
                      </Col>
                    );
                  })}
                </Row>
              )}
            </React.Fragment>
          );
        })}
      </Row>
      <IdCardModal
        handleCancel={handleCancel}
        onChange={handleChange}
        value={currentVal}
        disabled={disabled}
        visible={visible && type == 'idCard'}
      />
      {/* 住址证明 */}
      <CommonModal
        handleCancel={handleCancel}
        onChange={handleChange}
        title={title}
        subTitle={subTitle}
        type={type}
        disabled={disabled}
        value={currentVal}
        visible={visible && !['insuranceProof', 'bankMonthlyStatement', 'idCard'].includes(type)}
      />
      {/* 银行月结单 */}
      <BankModal
        handleCancel={handleCancel}
        onChange={handleChange}
        value={currentVal}
        disabled={disabled}
        visible={visible && type == 'bankMonthlyStatement'}
      />
      <InsuranceModal
        disabled={disabled}
        handleCancel={handleCancel}
        onChange={handleChange}
        value={currentVal}
        visible={visible && type == 'insuranceProof'}
      />
    </>
  );
};

export default UploadList;
